<script lang="ts" setup>
// 组件
import { ElMessage } from "element-plus";

// Store
import { useCanvasStoreHook } from "@/stores/modules/canvas";

const useCanvasStore = useCanvasStoreHook();
import { isNeedStop } from "@/views/associationAnalysis/canvas/components/canvasG6/common/menuEvent";
import { graph } from "@/views/associationAnalysis/canvas/components/canvasG6/common/index";
import useCanvas from "@/hooks/canvas/useCanvas";

// props类型
export interface Props {
  nodes: [];
  isEmpty: boolean;
  isCall: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  nodes: () => [],
  isEmpty: true,
  isCall: false,
});

interface Emit {
  (e: "getNodes"): void;

  (e: "close"): void;
}

const emit = defineEmits<Emit>();

watch(
  () => props.nodes,
  (nVal) => {
    // console.log(nVal, "nVal");
    nodes.value = nVal.map((item: any) => {
      item.isSelect = item.isSelect ? true : false;
      return item;
    });
    isIndeterminate.value =
      checkedData.value.length > 0 &&
      checkedData.value.length < nodes.value.length;
    if (isIndeterminate.value) {
      checkAll.value = false;
    } else {
      checkAll.value = checkedData.value.length == 0 ? false : true;
    }
  }
);

// 获取由父组件接口获取的搜索数据
// const nodes = computed(() => {
//   checkedData.value = [];
//   // checkAll.value = checkedData.value.length === props.nodes.length;
//   // isIndeterminate.value =
//   //   checkedData.value.length > 0 &&
//   //   checkedData.value.length < props.nodes.length;
//   return props.nodes.map((item: any) => {
//     item.isSelect = item.isSelect ? true : false;
//     return item;
//   });
// });
const nodes = ref([]);

// 下拉加载是否禁用
const disabled = computed(() => props.isCall);
// 是否有数据
const isEmpty = computed(() => props.isEmpty);

// 下拉加载事件
const load = () => {
  emit("getNodes");
};

// 关闭弹窗事件
const handleClose = () => {
  emit("close");
};

const checkAll = ref(false); // 全选
const isIndeterminate = ref(false); // 半选
const checkedData = ref([]); // 选中的对象集合

// 某一条对象的选中时的事件
const handleCheckedCitiesChange = (item) => {
  if (item.isSelect) {
    checkedData.value.push(item);
  } else {
    checkedData.value = checkedData.value.filter((ele) => ele.id !== item.id);
  }

  if (
    checkedData.value.length &&
    checkedData.value.length === nodes.value.length
  ) {
    isIndeterminate.value = false;
    checkAll.value = true;
  } else {
    isIndeterminate.value = true;
    checkAll.value = false;
  }
};

// 全选事件
const handleCheckAllChange = (val: boolean) => {
  // console.log(val, "val");
  nodes.value = nodes.value.map((item: any) => {
    item.isSelect = val;
    return item;
  });
  checkedData.value = val ? [...nodes.value] : [];
  checkAll.value = val;
  isIndeterminate.value = false;
};

// 导入关联分析事件
const handelExportAllNode = () => {
  if (checkedData.value.length === 0) {
    ElMessage({
      message: "请至少选中一个",
      type: "warning",
    });
    return;
  }
  isNeedStop.value = true; // 阻止画布重新渲染，防止后退失效
  let deelData = useCanvas(checkedData.value, useCanvasStore.getCanvasByData());
  console.log(graph, deelData, "deelData");
  graph.changeData(deelData); // 更新画布，添加撤销操作栈
  useCanvasStore.setCanvas(JSON.parse(JSON.stringify(deelData)));
  sessionStorage.setItem("graphIsEdit", true); // 标记是否有未保存的数据
  handleClose();
};

// 导入单个节点
const importNode = (item) => {
  checkedData.value = [item];
  handelExportAllNode();
};
</script>

<template>
  <div class="search-pop">
    <div class="close">
      <i class="iconfont icon_close" @click="handleClose"></i>
    </div>
    <template v-if="isEmpty">
      <el-empty class="flex-1" description="暂无数据" />
    </template>
    <ul v-else v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
      <li
        v-for="(item, index) in nodes"
        :key="index"
        :class="item.isSelect ? 'bg-[#f7f8fa]' : ''"
        class="hover:bg-[#f7f8fa]"
      >
        <div>
          <el-checkbox
            v-model="item.isSelect"
            @change="handleCheckedCitiesChange(item)"
          ></el-checkbox>
          <p :title="item.label">{{ item.label }}</p>
        </div>
        <el-button
          class="ml-[25px] mt-[8px]"
          link
          type="primary"
          @click="importNode(item)"
        >
          添加到关联分析
        </el-button>
      </li>
    </ul>
    <div class="foot">
      <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
      >
        全选
      </el-checkbox>
      <el-button type="primary" @click="handelExportAllNode">
        导入关联分析
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.search-pop {
  position: absolute;
  top: 55px;
  z-index: 21;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 340px;
  height: 512px;
  padding: 8px;
  background: #fff;
  border: 1px solid #dcdde2;
  border-radius: 4px;
  box-shadow: 0 4px 16px 0 rgb(13 22 50 / 10%);

  .close {
    display: flex;
    justify-content: end;
  }

  > ul {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto;

    > li {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: self-start;
      width: 100%;
      height: 88px;
      padding: 0 8px 8px 16px;
      transition: all 0.3s;

      > div {
        display: flex;
        align-items: flex-start;

        p {
          display: -webkit-box;

          // display: flex;
          // flex-wrap: wrap;
          width: 100%;
          padding-top: 5px;
          padding-left: 5px;
          margin-left: 8px;
          overflow: hidden;
          font-family: PingFangSC-Regular, "PingFang SC";
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          color: #222;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    padding: 0 8px;
    border-top: 1px solid #dcdde2;
  }
}
</style>
